<template>
  <div class="product-service-table">
    <el-table v-table-style ref="tableRef" v-loading="listLoading" header-row-class-name="common-list-table-header__v2" :data="disposeFormListViewTime(dataList, columns)" stripe border :max-height="tableHeight + 'px'">
      <template slot="empty">
        <BaseListForNoData v-show="!listLoading" :notice-msg="$t('common.base.tip.noData')" table-type="smallTable"></BaseListForNoData>
      </template>

      <template v-for="column in columns">
        <el-table-column :key="column.field" show-overflow-tooltip :label="column.displayName" :prop="column.field" :min-width="column.fieldName === 'svcProjectName' ? '160px' : ''">
          <template slot-scope="scope">
            <template v-if="column.fieldName === 'svcSerialNumber'">
              {{ getWarrantyServiceItemLabel(scope.row[column.fieldName]) }}
            </template>
            <template v-else-if="column.fieldName === 'svcProjectName'">
              {{ getWarrantyServiceItemLabel(scope.row[column.fieldName]) }}
              <serviceProjectNameTag v-if="scope.row.system"/>
            </template>
            <template v-else-if="column.fieldName === 'serviceProjectCycle'"> {{ scope.row.timeLimit }}{{ scope.row.timeUnit | cycleFun }} </template>
            <template v-else-if="column.fieldName === 'svcStartTime'">
              {{ scope.row.svcStartTime | fmt_form_date }}
            </template>
            <template v-else-if="column.fieldName === 'svcEndTime'">
              {{ scope.row.svcEndTime | fmt_form_date }}
            </template>
            <template v-else>
              {{ $formatFormField(column, scope.row) }}
            </template>
          </template>
        </el-table-column>
      </template>

      <el-table-column fixed="right" :label="$t('common.fields.action.displayName')" width="120" v-if="isShowOperation">
        <template slot-scope="scope">
          <span class="color-primary pub_btn mr_12" v-if="serviceEdit" @click="handleClickNewOrEditServiceItem('edit', scope.row)">{{ $t('common.base.edit') }}</span>
          <span class="color-danger pub_btn" v-if="serviceDelete" @click="handleClickDel(scope.row)">{{ $t('common.base.delete') }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <BaseAddOnPagination v-if="Object.keys(paginationInfo).length" :paginationInfo="paginationInfo" @pageJump="handleCurrentChange" @sizeChange="handleSizeChange" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch, computed } from 'vue';
import serviceProjectNameTag from '@src/modules/setting/productV2/productQualityManagement/serviceProjectNameTag.vue';

import i18n from '@src/locales';
import { useFormTimezone } from 'pub-bbx-utils'
import { WarrantyServiceItemLabelEnum } from '@model/enum/LabelEnum'

export default defineComponent({
  name: 'product-service-table',
  components: {
    serviceProjectNameTag,
  },
  props: {
    columnFields: {
      type: Array,
      default: () => [],
    },
    columnData: {
      type: Array,
      default: () => [],
    },
    paginationInfo: {
      type: Object,
      default: () =>({})
    },
    tableHeight: {
      type: String,
      default: '',
    },
    // 删除按钮权限
    serviceDelete: {
      type: Boolean,
      default: false
    },
    // 编辑按钮权限
    serviceEdit: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    cycleFun(value) {
      const newMap = {
        year: i18n.t('common.base.year'),
        month: i18n.t('common.base.month'),
        day: i18n.t('common.base.day2'),
      };

      return newMap[value] || '';
    },
  },
  emits: ['handleSubmit', 'handleClickNewOrEditServiceItem', 'handleClickDel', 'handleSizeChange'],
  setup(props, { emit }) {
    const listLoading = ref(false);

    let state = reactive({
      dataList: [],
    });

    const columns = computed(() => {
      return props.columnFields || []
    })
    // 是否显示操作栏
    const isShowOperation = computed(() => {
      return props.serviceEdit || props.serviceDelete;
    });

    watch(
      () => props.columnData,
      value => {
        state.dataList = value;
      },
      {
        immediate: true,
      }
    );

    // 切换分页
    const handleCurrentChange = pN => {
      emit('handleCurrentChange', pN);
    };

    const handleSizeChange = (pageSize) => {
      emit('handleSizeChange', pageSize);
    }
    const handleClickDel = row => {
      emit('handleClickDel', row);
    };

    const handleClickNewOrEditServiceItem = (type, row) => {
      emit('handleClickNewOrEditServiceItem', type, row);
    };

    // 获取质保服务项目的多语言label
    const getWarrantyServiceItemLabel = (label) => {
      return WarrantyServiceItemLabelEnum[label] || label
    }

    return {
      listLoading,
      ...toRefs(state),
      columns,
      handleCurrentChange,
      handleSizeChange,
      handleClickDel,
      handleClickNewOrEditServiceItem,
      isShowOperation,
      ...useFormTimezone(),
      getWarrantyServiceItemLabel,
    };
  },
});
</script>
<style lang="scss" scoped>
.product-service-table {
  .pub_btn {
    cursor: pointer;
    &:hover {
      text-decoration: underline;
    }
  }
}
</style>
